html{width:100%;height:100%}
body{
    background:#f3f3f3;
    color:rgba(0,0,0,.6);
    font-family:Lato,"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:14px;
    line-height:1.3em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
    }
.form-panel.one:before,.overlay{
    position:absolute;
    top:0;
    left:0;
    display:none;
    background:rgba(0,0,0,.8);
    width:100%;height:100%
    }
.form{
    z-index:15;
    position:relative;
    background:#fff;
    width:500px;
    border-radius:1px;
    -webkit-box-shadow:0 0 1px rgba(0,0,0,.1);
    box-shadow:0 0 1px rgba(0,0,0,.1);
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:4rem auto 10px;
    overflow:hidden}
.form-toggle{
    z-index:10;
    position:absolute;
    top:60px;
    right:60px;
    background:#fff;
    width:60px;
    height:60px;
    border-radius:100%;
    -webkit-transform-origin:center;
    transform-origin:center;
    -webkit-transform:translate(0,-25%) scale(0);
    transform:translate(0,-25%) scale(0);
    opacity:0;
    cursor:pointer;
    -webkit-transition:all .3s ease;
    transition:all .3s ease
    }
.form-toggle:after,.form-toggle:before{
    content:'';
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:4px;
    background:#32c787;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.form-toggle:before{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.form-toggle:after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.form-toggle.visible{-webkit-transform:translate(0,-25%) scale(1);transform:translate(0,-25%) scale(1);opacity:1}.form-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:1rem!important}.form-group:last-child{margin:0}.form-group label{display:block;margin:0 0 10px;color:rgba(0,0,0,.6);font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:.2em}.two .form-group label{color:#fff}.form-group input{outline:0;display:block;background:rgba(0,0,0,.1);width:100%;border:0;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;color:rgba(0,0,0,.6);font-family:inherit;font-size:inherit;font-weight:500;line-height:inherit;-webkit-transition:.3s ease;transition:.3s ease}.form-group input:focus{color:rgba(0,0,0,.8)}.two .form-group input{color:#fff}.two .form-group input:focus{color:#fff}.form-group button{outline:0;background:#32c787;width:100%;border:0;border-radius:4px;padding:12px 20px;color:#fff;font-family:inherit;font-size:inherit;font-weight:500;line-height:inherit;text-transform:uppercase;cursor:pointer}.two .form-group button{background:#fff;color:#32c787}.form-group .form-remember{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}.form-group .form-remember input[type=checkbox]{display:inline-block;width:auto;margin:0 10px 0 0}.form-group .form-recovery{color:#32c787;font-size:12px;text-decoration:none}.form-panel{padding:60px calc(5% + 60px) 60px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.form-panel.one:before{content:'';display:block;opacity:0;visibility:hidden;-webkit-transition:.3s ease;transition:.3s ease}.form-panel.one.hidden:before{display:block;opacity:1;visibility:visible}.form-panel.two{z-index:5;position:absolute;top:0;left:95%;background:#32c787;width:100%;min-height:100%;padding:60px calc(10% + 60px) 60px 60px;-webkit-transition:.3s ease;transition:.3s ease;cursor:pointer}.form-panel.two:after,.form-panel.two:before{content:'';display:block;position:absolute;top:60px;left:1.5%;background:rgba(255,255,255,.2);height:30px;width:2px;-webkit-transition:.3s ease;transition:.3s ease}.form-panel.two:after{left:3%}.form-panel.two:hover{left:93%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}.form-panel.two:hover:after,.form-panel.two:hover:before{opacity:0}.form-panel.two.active{left:10%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2);cursor:default}.form-panel.two.active:after,.form-panel.two.active:before{opacity:0}
.form-header{
    margin:0 0 40px
}
.form-header h1{
     padding:4px 0;color:#165cd2;font-size:24px;font-weight:700;text-transform:uppercase}
.two .form-header h1{
    position:relative;z-index:40;color:#fff
}
.pen-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:600px;margin:20px auto 100px}.pen-footer a{color:#fff;font-size:12px;text-decoration:none;text-shadow:1px 2px 0 rgba(0,0,0,.1)}.pen-footer a .material-icons{width:12px;margin:0 5px;vertical-align:middle;font-size:12px}.cp-fab{background:#fff!important;color:#32c787!important}.login-loader{box-sizing:border-box;display:-ms-flexbox;display:flex;background:#42b983;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}@-webkit-keyframes line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@keyframes line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}.line-scale>div{border-radius:1px;margin:0 2px;background-color:#fff;width:3px;height:14px;display:inline-block}.line-scale>div:nth-child(1){-webkit-animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(2){-webkit-animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(3){-webkit-animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(4){-webkit-animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(5){-webkit-animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div{-webkit-animation-fill-mode:both;animation-fill-mode:both}